<template>
  <div class="leftContent">
    <ul class="leftUlOne">
      <li>
        <div>{{allNum.rawNum}}</div>
        <p>原材料</p>
      </li>
      <li>
        <div>{{allNum.lowValueNum}}</div>
        <p>低值易耗</p>
      </li>
      <li>
        <div>{{allNum.packNum}}</div>
        <p>包装材料</p>
      </li>
    </ul>
    <ul class="leftUlTwo">
      <li>
        <img src="@/assets/images/yykb/zhu2.png" />
        <div>
          <span>
            <b>{{allNum.rawNumRate}}</b>%
          </span>
          <em>原材料</em>
        </div>
      </li>
      <li>
        <img src="@/assets/images/yykb/zhu1.png" />
        <div>
          <span>
            <b>{{allNum.lowValueNumRate}}</b>%
          </span>
          <em>低值易耗</em>
        </div>
      </li>
      <li>
        <img src="@/assets/images/yykb/zhu3.png" />
        <div>
          <span>
            <b>{{allNum.packNumRate}}</b>%
          </span>
          <em>包装材料</em>
        </div>
      </li>
      <li>
        <img src="@/assets/images/yykb/zhu4.png" />
        <div>
          <span>
            <b>{{allNum.returnNumRate}}</b>%
          </span>
          <em>退货料</em>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      allNum: {}
    }
  },
  watch: {},
  mounted() {},
  methods: {
    async getPurchaseTrack() {
      const res = await this.$axios.get('/board/operations/purchaseTrack')
      if (res?.data.code === 200) {
        this.allNum = res.data.data
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.leftContent {
  // width: 100%;
  padding: 2% 7%;
  height: calc(100% - 80px);
}
.leftUlOne {
  width: 100%;
  height: 30%;
  overflow: hidden;
  li {
    width: 33.333%;
    padding: 0px 10px;
    height: 100%;
    float: left;
    div {
      width: 100%;
      height: calc(100% - 25px);
      background: url(../../../../assets/images/yykb/quan.png) no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      // margin: 2%;
    }
    p {
      margin: 0;
      height: 25px;
      line-height: 25px;
      font-size: 14px;
      color: #fff;
      text-align: center;
    }
  }
}
.leftUlTwo {
  height: 70%;
  margin-left: 2%;
  li {
    width: 50%;
    float: left;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    img {
      width: 40%;
      float: left;
    }
    div {
      width: 50%;
      // height: 100%;
      float: left;
      color: #fff;
      padding: 5% 0 0 10%;
      span {
        width: 100%;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        b {
          font-size: 23px;
        }
      }
      em {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
      }
    }
  }
}
</style>
